<template>
  <el-carousel class="carousel" arrow="never">
    <el-carousel-item
      class="carouselItem"
      v-for="(item, index) in bannerList"
      :key="'banner' + index"
    >
      <div class="bannaerItemBox" @click="toDetail(item.objectId)">
        <img
          class="bannerItem"
          :src="`${$basAssetsUrl}${item.originImg}`"
          alt=""
          srcset=""
        />
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'Banner',
  props: {
    bannerList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    toDetail(id) {
      const url = this.$router.resolve({
        path: '/news/detail',
        query: {
          id
        }
      }).href;
      window.open(url, '_blank');
    },
  },
};
</script>
<style lang="scss" scoped>
.carousel {
  width: 1026px;
  height: 332px;
  border-radius: 8px;
  overflow: hidden;
  // 内容区
  ::v-deep .el-carousel__container {
    height: 332px;
  }
  // 指示器
  ::v-deep .el-carousel__indicators {
    position: absolute;
    bottom: 60px;
    right: 60px;
    left: inherit;
    transform: none;
    .el-carousel__indicator button {
      width: 80px;
      height: 6px;
      border-radius: 2px;
      background: #fff;
      opacity: 0.4;
    }
    .el-carousel__indicator.is-active button {
      opacity: 1;
    }
  }
  .carouselItem {
    width: 1026px;
    height: 332px;
    cursor: pointer;
    .bannaerItemBox {
      width: 1026px;
      height: 332px;
      display: flex;
      align-items: center;
      overflow: hidden;
      .bannerItem {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
